<template>
  <div class="root">
    <el-input  prefix-icon="el-icon-full-screen" ref="txtScan" clearable v-model="txtScan" :placeholder="propPlaceholder"  @keyup.native.13="barCodeScan" :disabled="isScan" >
      <template slot="prepend" v-if="strings.isNotBlank(propMsgPrepend)" >
        <span style="    color: black;">{{propMsgPrepend}}</span>
      </template>
      <template slot="append" v-if="strings.isNotBlank(propMsgAppend)">
        <small v-html="propMsgAppend" style="    color: black;font-style:italic;"></small>
      </template>
    </el-input>
  </div>
</template>

<script>
/*eslint-disable*/
import barcodeParse from '@/util/barcodeParse.js'
/** 用法
 <FortenScan ref="scan" propPlaceholder="扫描唯一码进行拣货或者取消拣货" @after-scan="barCodeScan"/>
 //扫码SN或RFID
 barCodeScan(txtScan) {
    this.utilVue.loadShow(true)
    this.$ajax.post('/wm/transfer_item/scan', {autoUnlock: true, 'transferId': this.form.id, 'uniqueCode': txtScan, 'fromWarehouseId': this.form.fromWarehouseId}).then(
      resp => {
        if (resp.code == 0) {
          this.utilMessage.success(resp.msg)
          this.fetchData()
          this.$set(this.$data, 'txtScan', null)
          this.fetchRequiredData()
        }
        this.utilVue.loadHide()
      }
    )
  },
*/
export default {
  name: 'FortenScan',
  title: '扫描控件',
  remark: '值变化后调用after-scan',
  props: {
    propPlaceholder: {String,default:'请扫描'},//占位符
    propType: {String,default:'uniqueCode'},//扫描类型, uniqueCode【默认】: 唯一码扫描(sn/rfid/)，其他待扩展
    propAutofocus: {Boolean,default: true},//自动聚焦，默认500毫秒后聚焦
    propMsgPrepend: {String,default: null},//文本框前置描述信息
    propMsgAppend: {String,default: null},//文本框后置描述信息
    propClearAfterScan: {Boolean,default: true},//扫描后，自动清空文本框
    propEnterHandel: {Boolean,default: true},//回车触发事件
    propIsReplaceBracket: {Boolean,default: true},//true: 替换括号
  },
  created() {
    if (this.propAutofocus) {
      setTimeout(() => {
        this.focus()
      }, 500)
    }
  },
  data() {
    return {
      txtScan: '',
      isScan: false
    }
  },
  methods: {
    //扫描后执行
    barCodeScan() {
      if (!this.propEnterHandel) {
        this.focus()
        this.$emit('after-scan', this.getValue(this.propIsReplaceBracket))
        return;
      }
      this.txtScan = this.getValue()
      if (this.strings.isBlank(this.txtScan)) return
      if (this.propType == 'uniqueCode'){
        let codeType = barcodeParse.barCodeType(this.txtScan)
        let scanInfo = barcodeParse.gtinAnalysis(this.txtScan)
        console.log('codeType', codeType, scanInfo)
        if (codeType != 'SN' && codeType != 'RFID' && codeType != 'GTIN') {
          this.utilMessage.warning(`唯一码类型校验失败，唯一码【${this.txtScan}】`)
          this.clear()
          return
        }
        if (!['SN', 'RFID', 'GTIN'].includes(codeType) && scanInfo.udi) {
          this.utilMessage.warning(`唯一码类型校验失败，唯一码【${this.txtScan}】`)
          this.clear()
          return
        }
        if (codeType == 'SN' && this.txtScan.substring(0,2).toUpperCase() == 'SN') {
          this.txtScan = this.txtScan.substring(0,2).toUpperCase() + this.txtScan.substring(2,this.txtScan.length)
        }
      }
      this.isScan = true
      this.$emit('after-scan', this.txtScan )
      if (this.propClearAfterScan) {
        this.clear()
      } else {
        this.isScan = false
        this.focus()
      }
    },
    //聚焦
    focus() {
      if (this.$refs && this.$refs.txtScan) {
        this.$refs.txtScan.focus()
      }
    },
    //清除数据
    clear() {
      this.isScan = false
      this.txtScan = ''
      this.focus()
    },
    /**
    * @author Tai
    * @Description 获取数据
    * @Date 2024/4/19 上午11:04
     * @param isReplaceBracket true 替换括号
    */

    getValue(isReplaceBracket = true ) {
      this.txtScan = this.txtScan.replace(/\s/g,'')
      if (isReplaceBracket) {
        this.txtScan = this.txtScan.replace(/\(/g,'')
        this.txtScan = this.txtScan.replace(/\)/g,'')
      }
      return this.txtScan
    }
  }
}
</script>

<style lang="scss">
  .el-input__inner::placeholder {
    color: black;
    font-size: 14px;
  }
  .root{
    border: 2px solid #82848a; border-radius: 5px;
  }
</style>
